import React, { useEffect, useState } from "react";
// import Counter from "./components/Counter";
// import User from "./components/User";
import "./App.less";
import AppRoutes from "./routes/index";
import Header from "./views/Header/Header";
import {
  SettingOutlined,
  MoonOutlined,
  ShareAltOutlined,
} from "@ant-design/icons";
import { Popover, message } from "antd";

const App: React.FC = () => {
  //复制
  const copyPage = async () => {
    try {
      await navigator.clipboard.writeText("http://localhost:8080/");
      message.success("内容已复制到剪贴板!");
    } catch (err) {
      message.error("复制失败!");
    }
  };
  const setTheme = () => {
    message.warning("主题定制暂未开放!");
  };
  const buts = (
    <div>
      <MoonOutlined className="mainIcon" onClick={setTheme} />
      <ShareAltOutlined className="mainIcon" onClick={copyPage} />
    </div>
  );

  return (
    <div>
      {/* <Counter />
      <User /> */}
      <Header />
      <div className="app">
        <div className="AppRoutes_set">
          <Popover placement="left" content={buts}>
            <SettingOutlined spin style={{ fontSize: "25px" }} />
          </Popover>
        </div>
        <AppRoutes />
      </div>
    </div>
  );
};

export default App;
